@import  "../../base/fn";

.ui-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-top: 31.25%; //默认200px
}

.ui-slider-content {
    display: -webkit-box;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    & > li{
        -webkit-box-flex: 1;
        width: 100%;
        height: 100%;
        &.active{
            opacity: .5;
        }
        img{
            display: block;
            width: 100%;
        }
        span{
            display: block;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            -webkit-background-size: 100% 100%;
        }
    }
}

.ui-slider-indicators {
    position: absolute;
    display: -webkit-box;
    -webkit-box-pack: end;
    width: 100%;
    bottom: 10px;
    right: 10px;
    font-size: 0;
    li{
      position: relative;
      display: block;
      text-indent:100%;
      white-space:nowrap;
      overflow:hidden;
      font-size: 0;
      width: 7px;
      height: 7px;
      border: 1px solid rgba(0,0,0,.3);
      background-color: rgba(0,0,0,.3);
      border-radius:10px;
      margin-right: 6px;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -webkit-background-clip: padding-box;
      &.current:before {
          content: '';
          position: absolute;
          background-color: #fff;
          left: 0px;
          top: 0px;
          width: 5px;
          height: 5px;
          border-radius: 10px;
          -webkit-box-sizing: border-box;
          -webkit-background-clip: padding-box;
      }
    }
}

.ui-slider-indicators-center{
    -webkit-box-pack: center;
    right: 0;
}
